<template>
  <transition name="slide-right">
    <div
      class="ebook-content"
      v-show="ifShowContent"
    >
      <my-small-tabbar
        id="tabhBar"
        :tabList="tabList"
        :tabIndex="typeBar"
        @changeTab="changeType"
        class="c-bd-b1-f6 tabhBar"
      ></my-small-tabbar>
      <template v-if="typeBar == 0">
        <template v-if="formatType == 2">
          <div
            class="content-wrapper"
            v-if="!bookAvailable"
            @scroll="scrollContent($event)"
          >
            <div id="scrollList">
              <div
                class="content-item"
                v-for="(item, index) in navigation"
                :key="index"
                @click="jumpTo(item.src, item.isLock)"
              >
                <span
                  class="theme-bg c-br20 c-fc-white c-fs16 c-ph12 c-pv5"
                  v-show="hasPermission == false && watchPermission == 1 && item.isLock == 0"
                >试读</span>
                <span
                  class="content-text"
                  :class="{'c-fc-gray': item.isLock == 1, ' c-fc-xblack': item.isLock == 0}"
                  :style="contentItemStyle(item)"
                >{{item.title}}</span>
                <template v-if="item.isLock == 1">
                  <!-- isLock 0:无锁，1：未解锁 -->
                  <div class="c-pr14 c-fs16 c-flex-row c-flex-center c-fc-sgray">
                    <i class="iconfont">&#xe7a5;</i>
                  </div>
                </template>
              </div>
            </div>
            <!-- loading -->
            <loading-status-tem
              id="loading"
              :dataStatus="dataStatus"
              noDataText="暂无内容"
            ></loading-status-tem>
          </div>
          <div
            class="empty"
            v-else
          >目录加载中,请稍后</div>
        </template>
        <template v-else>
          <div
            class="content-wrapper"
            @scroll="scrollContent($event)"
          >
            <div
              class="c-flex-row c-flexw-wrap c-ph40"
              id="scrollList"
            >
              <div
                class="c-p c-ww134 c-hh226 c-mv32 c-bg-white c-bd1-eee"
                :class="index % 3 == 0 ? '' : 'c-ml30'"
                v-for="(item, index) in pdfcatalog"
                :key="index"
                @click="pdfJumpTo(item.page, item.isLock)"
              >
                <img
                  class="c-w100 c-hh196"
                  :src="$addXossFilter(item.thumbnailUrl)"
                  alt=""
                >
                <p class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh32 c-fs22 c-fc-xblack">{{item.page}}</p>
                <template v-if="item.isLock == 1">
                  <!-- isLock 0:无锁，1：未解锁 -->
                  <div class="c-pa c-p-t0 c-p-l0 c-w100 c-h c-pz1 c-translucent-balck50"></div>
                  <i class="iconlock iconfont icon-lock"></i>
                </template>
              </div>
            </div>
            <!-- loading -->
            <loading-status-tem
              id="loading"
              :dataStatus="dataStatus"
              noDataText="暂无内容"
            ></loading-status-tem>
          </div>
        </template>
      </template>
      <!-- 书签 -->
      <template v-if="typeBar == 1">
        <template v-if="formatType == 2">
          <div class="content-wrapper">
            <div
              class="content-item epub-item"
              v-for="(item, index) in bookmark"
              :key="index"
              @click.stop="displaySearch(item.cfi)"
            >
              <div class="content-title">{{item.title}}</div>
              <div class="content-con">{{item.text}}</div>
              <div class="content-bottom">
                <div class="content-time">{{item.time}}</div>
                <div
                  class="iconfont"
                  @click.stop="handleClickBookMark(item, index)"
                >&#xe6b3;</div>
              </div>
            </div>
            <loading-status-tem class="noneTemplate-ebooks" :noData="bookmark.length == 0" :noDataText="'暂无内容'"></loading-status-tem>
          </div>
        </template>
        <template v-else>
          <div class="content-wrapper">
            <div
              class="c-flex-row c-justify-sb c-ph40 c-mt32"
              v-show="pdfmark.length > 0"
            >
              <div class="c-fs20 c-fc-gray">共{{pdfmark.length}}页</div>
              <div
                class="c-fs20 c-fc-gray"
                @click="handleClickEdit"
              >{{isEdit ? '完成' : '编辑'}}</div>
            </div>
            <div class="c-flex-row c-flexw-wrap c-ph40">
              <div
                class="c-p c-ww134 c-hh226 c-mv32 c-bg-white"
                :class="[index % 3 == 0 ? '' : 'c-ml30', item.isChecked ? 'c-bd1-smblue' : 'c-bd1-eee']"
                v-for="(item, index) in pdfmark"
                :key="index"
                @click="handleClickPdfJumpTo(index, item.page, isEdit, item.isChecked)"
              >
                <img
                  class="c-w100 c-hh196"
                  :src="$addXossFilter(item.thumbnailUrl)"
                  alt=""
                >
                <div class="c-pa c-p-t0 c-p-r20 iconPdfmark"></div>
                <p class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh32 c-fs22 c-fc-xblack">{{item.page}}</p>
              </div>
              <loading-status-tem class="noneTemplate-ebooks" :noData="pdfmark.length == 0" :noDataText="'暂无内容'"></loading-status-tem>
            </div>
            <div
              class="c-flex-row c-aligni-center c-justify-sb c-bd-t1-eee pdfMark-bottom"
              v-show="isEdit && pdfmark.length > 0"
            >
              <div class="c-flex-row c-hh42 c-aligni-center">
                <span
                  class="iconfont c-fs30 theme-fc c-pl26"
                  v-show="!selectAll"
                >&#xe692;</span>
                <span
                  class="iconfont c-fs30 theme-fc-hover c-pl26"
                  v-show="selectAll"
                  @click="clickSelectAll"
                >&#xe6b1;</span>
                <span
                  class="c-fs20 c-pl12 c-fc-sblack"
                  @click="clickSelectAll"
                >全选</span>
              </div>
              <div
                v-if="isEdit"
                class="c-flex-row c-aligni-center c-justify-center c-ww124 c-hh42 c-br30 c-fs22 theme-fc theme-bd1 c-mr24"
                @click="handleClickDelete(isArrayPdfMark)"
              >
                <div>删除</div>
              </div>
            </div>
          </div>
        </template>
      </template>
      <!-- 划线 -->
      <template v-if="typeBar == 2">
        <div class="content-wrapper">
          <div
            class="content-item epub-item"
            v-for="(item, index) in markingArray"
            :key="index"
            @click.stop="displaySearch(item.cfi)"
          >
            <div class="content-title">{{item.title}}</div>
            <div class="content-con">{{item.content}}</div>
            <div class="content-bottom hightLine">
              <div
                class="iconfont"
                @click.stop="handleClickHightLine(item)"
              >&#xe6b3;</div>
            </div>
          </div>
          <loading-status-tem class="noneTemplate-ebooks" :noData="markingArray.length == 0" :noDataText="'暂无内容'"></loading-status-tem>
        </div>
      </template>
    </div>
  </transition>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
export default {
  name: 'EbooksContent',
  props: {
    ifShowContent: Boolean,
    navigation: Object,
    bookAvailable: Boolean,
    bookmark: Array,
    pdfcatalog: Array,
    formatType: Number,
    pdfmark: Array,
    markingArray: Array,
    dataStatus: {
      type: String,
      default: 'HAS_MORE_DATA'
    },
    watchPermission: Number, //默认 0未开启试读
    hasPermission: Boolean
  },
  components: {
    MySmallTabbar,
    loadingStatusTem,
  },
  data() {
    return {
      tabList: [{
        title: '目录',
        index: 0
      }, {
        title: '书签',
        index: 1
      }],
      typeBar: 0,
      bookmark: null,
      selectAll: false,
      isEdit: false, //是否编辑状态
      isArrayPdfMark: [],
    }
  },
  watch: {
    formatType(formatType) {
      if (formatType == 2) {
        this.tabList.push({
          title: '笔记',
          index: 2
        })
      }
    }
  },
  methods: {
    // 删除
    handleClickDelete(isArrayPdfMark) {
      isArrayPdfMark = [];
      this.$emit('handleClickDelete', isArrayPdfMark)
    },
    // 编辑按钮
    handleClickEdit() {
      if (this.isEdit) {
        this.isEdit = false;
        this.pdfmark.forEach((item, index) => {
          item.isChecked = false
        })
      } else {
        //进入编辑
        this.isEdit = true;
        this.selectAll = false;
      }
    },
    handleClickPdfJumpTo(index, pageNum, isEdit, isChecked) {
      if (isEdit) {
        if (!isChecked) {
          this.$set(this.pdfmark[index], "isChecked", true);
          let selectArr = this.pdfmark.filter(item => {
            return item.isChecked == true;
          })
          if (selectArr.length == this.pdfmark.length) {
            this.selectAll = true
          }
        } else {
          this.selectAll = false;
          this.$set(this.pdfmark[index], "isChecked", false)
        }
        // this.isArrayPdfMark.push(pageNum)
      }
      this.$emit('handleClickPdfJumpTo', pageNum, isEdit)
    },
    clickSelectAll() {
      this.selectAll = !this.selectAll;
      this.pdfmark.forEach((item, index) => {
        if (!this.isArrayPdfMark.includes(item.page)) {
          this.isArrayPdfMark.push(item.page)
        }
      })
      if (this.selectAll == false) {
        this.isArrayPdfMark = [];
        this.pdfmark.forEach((item, index) => {
          item.isChecked = false
        })
      } else {
        this.pdfmark.forEach((item, index) => {
          item.isChecked = true
        })
      }
    },
    pdfJumpTo(pageNum, isLock) {
      this.$emit('pdfJumpTo', pageNum, isLock)
    },
    scrollContent(event) {
      this.$emit('scrollContent', event)
    },
    // 删除书签
    handleClickBookMark(item, index) {
      this.$emit('handleClickBookMark', item, index)
    },
    // 删除划线
    handleClickHightLine(item) {
      this.$emit('handleClickHightLine', item)
    },
    // 跳转书签页
    displaySearch(target) {
      this.$emit('displaySearch', target)
    },
    // 跳转目录
    jumpTo(target, isLock) {
      this.$emit('jumpTo', target, isLock)
    },
    changeType(type) {
      this.typeBar = type;
    },
    contentItemStyle(item) {
      return {
        marginLeft: `${(item.level * 30) / 64}rem`
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ebook-content {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 104;
  width: 13.5rem;
  height: 100%;
  // margin-left: -8rem;
  background-color: #fff;
  overflow: hidden;
  .content-wrapper {
    width: 100%;
    flex: 1;
    height: 100%;
    overflow: auto;
    .content-item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.5rem 1rem;
      border-bottom: 1px solid #f4f4f4;
      &.epub-item {
        flex-direction: column;
        align-items: normal;
      }
      .content-text {
        flex: 1;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 0.6rem;
        padding: 0 0.125rem;
      }
      .content-title {
        color: #333;
        font-size: 0.55rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .content-con {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #999;
        font-size: 0.45rem;
        margin: 0.3rem 0;
      }
      .content-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .content-time {
          color: #999;
          font-size: 0.45rem;
        }
        .iconfont {
          font-size: 0.55rem;
          color: #999;
        }
        &.hightLine {
          justify-content: flex-end;
        }
      }
    }
  }
  .empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .6rem;
    text-align: center;
    color: #333;
  }
}
.slide-right-enter-to,
.slide-right-leave-active {
  transform: translate3d(0, 0, 0);
}
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s linear;
}
.slide-right-enter,
.slide-right-leave-to {
  transform: translate3d(-13.5rem, 0, 0);
}
.tabhBar {
  width: 100%;
  background-color: #fff;
  z-index: 900;
}
.iconlock {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2rem;
  height: 0.25rem;
  margin-top: -0.125rem;
  margin-left: -0.2rem;
  z-index: 2;
  color: #fff;
}
.c-ml56 {
  margin-left: 1.4rem;
}
.c-ww134 {
  width: 3.2rem;
}
.c-hh226 {
  height: 5.65rem;
}
.c-mb42 {
  margin-bottom: 1.05rem;
}
.c-hh196 {
  height: 4.9rem;
}
.iconPdfmark {
  right: 0.45rem;
  width: 0.45rem;
  height: 0.9rem;
  background: url("../../../assets/iconPdfmark.png") no-repeat center center;
  background-size: contain;
}
.pdfMark-bottom {
  position: absolute;
  bottom: 0;
  height: 2rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  background-color: #fff;
  max-width: 640px;
  z-index: 11;
}
.noneTemplate-ebooks {
  margin: 0 auto;
}
.c-bd1-eee {
  border: 1px solid #eee;
}
::-webkit-scrollbar {
  display: block!important;
  width: 0.125rem;
  border-radius: 0.125rem;
}
::-webkit-scrollbar-thumb {
  width: 0.125rem;
  border-radius: 0.125rem;
  background: #999;
}
</style>